<template>
  <div class="container">
    <div class="closeBtn">
      <span @click="$router.push('/')" class="iconfont iconicon-test"></span>
    </div>
    <div class="logo">
      <span class="iconfont iconnew"></span>
    </div>
    <!-- 用户名 -->
    <!-- 父组件接受数据 -->
    <MyInput 
    @Setvalue='Setusername'
    :rule="/^\d{3,6}$/" 
    type="text" 
    placeholder="请输入用户名" 
    />
    <!-- 密码 -->
    <MyInput
    @Setvalue='Setpassword'
    :rule="/^\d{3,12}$/"
    type="password"
    placeholder="请输入密码"
    
    />
    <Btn @click.native="login" btnText="登录" />
  </div>
</template>

<script>
import MyInput from "../components/MyInput";
import Btn from "../components/Btn";
export default {
  data() {
    return {
      username:'',
      password:'',
    };
  },
  methods: {
    Setusername(val){
        this.username=val
    },
    Setpassword(val){
        this.password=val
    },
    login(){
        this.$axios({
            method:'post',
            url:'/login',
            data:{
                username:this.username,
                password:this.password
            }
        }).then(res=>{
          console.log(res);
          const {data,message}=res.data
            if(message==='登录成功'){
                this.$toast.success('登录成功')
                console.log(message);
                console.log(data.user.id);
                localStorage.setItem('token',data.token)
                localStorage.setItem('userId',data.user.id)
                // window.location.href='http://localhost:8080/proindex#/proindex'
                this.$router.push('/proindex')
            }
        })
    }
  },
  components: {
    MyInput,
    Btn,
  },
};
</script> 

<style lang='less'>
@import url("http://at.alicdn.com/t/font_1426139_h6vn3jbl5q.css");
* {
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
}

.container {
   min-height: 100vh;
  padding: 20/360 * 100vw;
}
.closeBtn {
  .iconfont {
    font-size: 30/360 * 100vw;
  }
}
.logo {
  height: 100/360 * 100vw;
  text-align: center;
  .iconnew {
    font-size: 100/360 * 100vw;
    line-height: 100/360 * 100vw;
    color: #cc3300;
  }
}
// .unm{
//     height: 60/360*100vw;
//     #username{
//         line-height: 40/360*100vw;
//         width: 100%;
//         font-size: 16/360*100vw;
//         outline: none;
//         border: none;
//         border-bottom: 1px solid gray;
//         background-color: #f2f2f2;
//     }
// }
// .psd{
//     height: 60/360*100vw;
//     #password{
//         line-height: 40/360*100vw;
//         width: 100%;
//         font-size: 16/360*100vw;
//         outline: none;
//         border: none;
//         border-bottom: 1px solid gray;
//         background-color: #f2f2f2;
//     }
// }
</style>